<template>
    <div class="charts">
        <!-- 使用vue-echarts 全局组件-->
        <v-chart :option="getOption()" autoresize></v-chart>
    </div>
</template>

<script setup lang="ts">


// echarts配置项
const getOption = () => {
    return {
        xAxis: {
            type: 'category',
            show: false,
        },
        yAxis: {
            show: false
        },
        series: {
            type: 'bar',
            data:props.data,
            // 每个柱状图颜色
            colorBy: 'data',
            label: {
                show: false,
                position: 'insideTop',
                color: '#bfa'
            },
            // 延迟动画时间
            animationDelay: function (idx) {
                // 越往后的数据延迟越大
                return idx * 100;
            }
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            show: true,
            //图标底层的颜色
            backgroundColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "yellow", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "skyblue", // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
        },
        // 提示组件
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "cross"
            },
            position: function (point, params, dom, rect, size) {
                // 固定在顶部
                return [point[0], '10%'];
            }
        }
    }
}
// 接收父组件传递过来的props
let props = defineProps(['data'])
</script>

<style scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>